<template>
  <div class="app-container">
    <!--  查询-->
    <el-form ref="queryForm" :model="queryParams" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="机器人" prop="dogName">
        <el-input v-model="queryParams.dogName" placeholder="请输入机器人名称" clearable :style="{width: '240px'}">
        </el-input>
      </el-form-item>
      <el-form-item label="状态" prop="dogState">
        <el-select v-model="queryParams.dogState" placeholder="请选择机器人状态"  :style="{width: '100%'}">
          <el-option v-for="(item, index) in dogStateOptions" :key="index" :label="item.label"
                     :value="item.value" ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
<!--  按钮-->
  <el-row :gutter="10" class="mb8">
    <el-col :span="1.5">
      <el-button
        type="primary"
        plain
        icon="el-icon-plus"
        size="mini"
        @click="handleAdd"
      >新增</el-button>
    </el-col>
    <el-col :span="1.5">
      <el-button
        type="danger"
        plain
        icon="el-icon-delete"
        size="mini"
        :disabled="multiple"
        @click="handleDelete"
      >删除</el-button>
    </el-col>
    <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
  </el-row>
<!--  表格-->
  <el-table v-loading="loading" :data="dogList" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="50" align="center" />
    <el-table-column label="机器名称" align="center" key="dogName" prop="dogName" v-if="columns[0].visible" />
    <el-table-column label="机器IP" align="center" key="dogIP" prop="dogIP" v-if="columns[1].visible" :show-overflow-tooltip="true" />
    <el-table-column label="机器类型" align="center" key="dogType" prop="dogType" v-if="columns[2].visible" :show-overflow-tooltip="true" />
    <el-table-column label="机器状态" align="center" key="dogState" prop="dogState" v-if="columns[3].visible" :show-overflow-tooltip="true" :formatter="formatDogState"/>
    <!--      <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[4].visible" width="160">-->
    <!--        <template slot-scope="scope">-->
    <!--          <span>{{ parseTime(scope.row.createTime) }}</span>-->
    <!--        </template>-->
    <!--      </el-table-column>-->
    <el-table-column
      label="操作"
      align="center"
      width="160"
      class-name="small-padding fixed-width"
    >
      <template slot-scope="scope" v-if="scope.row.userId !== 1">
        <el-button
          size="mini"
          type="text"
          icon="el-icon-edit"
          @click="handleUpdate(scope.row)"
        >修改</el-button>
        <el-button
          size="mini"
          type="text"
          icon="el-icon-delete"
          @click="handleDelete(scope.row)"
        >删除</el-button>
      </template>
    </el-table-column>
  </el-table>
<!--  分页-->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
<!--  弹窗-->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-row :gutter="15">
        <el-form ref="elForm" :model="dogInfo"  size="medium" label-width="100px" :rules="rules">
          <el-col :span="12">
            <el-form-item label="机器名称" prop="dogName" >
              <el-input v-model="dogInfo.dogName" placeholder="请输入机器名称" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="机器人IP" prop="dogIP" >
              <el-input v-model="dogInfo.dogIP" placeholder="请输入机器人IP" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="机器类型" prop="dogType">
              <el-select v-model="dogInfo.dogType" placeholder="请选择机器类型" clearable :style="{width: '100%'}">
                <el-option v-for="(item, index) in dogTypeOptions" :key="index" :label="item.label"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

        </el-form>
      </el-row>
      <div slot="footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getRobotList,addRobot,delRobot,updataRobot } from '@/api/robot/robotMessage.js'
export default {
  name: "robotMessage",
  data() {
    return {
      // 查询
      dogStateOptions: [
        {
          value: 1,
          label: "正常"
        },
        {
          value: 0,
          label: "禁用"
        }
      ],
      showSearch: true,
      queryParams: {
        dogState: 1,
        dogName: "",
        pageNum: 1,
        pageSize: 5,
      },
      // 表格
      multiple: true,
      loading: true,
      dogList: [],
      //总数
      total: 0,
      //选择数据项
      ids: [],
      // 列信息
      columns: [
        { key: 0, label: `机器名称`, visible: true },
        { key: 1, label: `机器IP`, visible: true },
        { key: 2, label: `机器类型`, visible: true },
        { key: 2, label: `机器状态`, visible: true },
      ],
      // 弹窗
      rules: {
        dogName: {required: true},
        dogIP: {required: true},
        dogType: {required: true},
      },
      open: false,
      title: '',
      //新增的对象
      dogInfo: {
        dogId: undefined,
        dogName: undefined,
        dogIP: undefined,
        dogType: undefined,
      },
      //机器狗选择列表
      dogTypeOptions: [
        {value: 2, label: '人形'},
        {value: 1, label: '犬形'},
        {value: 3, label: '轮式'},
      ],
    };
  },
  created() {
    this.getList()
  },
  methods: {
    // 查询
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    //点击重置
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 按钮
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "新增机器人"
    },
    handleDelete(row) {
      const dogIds = row.dogId || this.ids;
      this.$modal.confirm('是否确认删除编号为"' + dogIds + '"的机器人数据项？').then(function() {
        return delRobot(dogIds)
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    // 表格
    getList() {
      getRobotList(this.queryParams).then(res => {
          console.log(res)
        this.dogList = res.rows.map(row => ({
          ...row,  // 保留其他字段不变
          dogType: row.dogType === 1 ? '犬形' :
            row.dogType === 2 ? '人形' :
              row.dogType === 3 ? '轮式' : row.dogType
        }));
          this.total = res.total;
          this.loading = false;
        }
      );
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.dogId);
      this.multiple = !selection.length;
      console.log(this.ids)
    },
    //点击修改按钮
    handleUpdate(row) {
      this.dogInfo.dogId = row.dogId
      this.dogInfo.dogIP = row.dogIP
      this.dogInfo.dogType = row.dogType
      this.dogInfo.dogName = row.dogName
      this.open = true
      this.title = "修改机器人信息"
    },
    formatDogState(row, column, cellValue, index) {
      if (cellValue === 1) {
        return '正常';
      } else if (cellValue === 0) {
        return '禁用';
      }
      return '未知';
    },
    // 弹窗
    reset() {
      this.dogInfo = {
        dogId: undefined,
        dogName: undefined,
        dogIP: undefined,
        dogType: undefined,
      }
      this.resetForm("elForm");
    },
    //点击确认（新增or修改）
    submitForm: function() {
      this.$refs["elForm"].validate(valid => {
        if (valid) {
          if (this.dogInfo.dogId == undefined) {
            //新增
            console.log(this.dogInfo)
            addRobot(this.dogInfo).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            }).catch(error=> {
              this.$modal.msgError("添加失败")
            });
          } else {
            //更新
            console.log(this.dogInfo)
            updataRobot(this.dogInfo).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
  }
};
</script>
